import { Component, OnInit } from '@angular/core';
import { GetMusicService } from '../../../providers/getMusic';
import { Cred, Id } from '../../../providers/global';
import { Creds } from '../../../providers/global.mock';
import { Router } from "@angular/router";
import * as KUTE from 'kute.js/kute.min.js'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
  creds: Cred[];
  constructor(public getMusic: GetMusicService,public router: Router) {
    this.init();
  }

  timer = (state) => {
    state.start();
    return new Promise((resolve, reject) => {
      setTimeout(()=>{
        resolve()
      },1000);
    });
  }
  async delete(id, i) {
    let state = i % 2 == 1 ?
      KUTE.fromTo("#event" + i, { left: '0%' }, { left: '-80%' }, { easing: 'easingElasticIn' }) :
      KUTE.fromTo("#event" + i, { left: '0%' }, { left: '80%' }, { easing: 'easingElasticIn' });
    await this.timer(state);
    this.creds.splice(i, 1);
    this.getMusic.delete(id).subscribe();
  }


  getJSON() {
    return new Promise((resolve, reject) => {
      this.getMusic.getId().subscribe(data => {
        try {
          this.creds = <Cred[]>data.json();
          resolve();
        } catch (e) {
          reject();
        }

      });
    })
  }

  async init() {
    this.creds = [];
    try {
      await this.getJSON();
    } catch (err) {
      await this.getJSON();
    }

  }
  ngOnInit() {

  }

  toAdd() {
    this.router.navigate(['music/add']);
  }
}
